<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>条件渲染</title>
    <script src="../vue3.js"></script>
    <style>
        ul,li{
            list-style: none;
        }
    </style>
</head>
<body>
    <div id="box">
<!--        <div v-if="isShow">11111</div>-->
<!--        <div v-else>22222</div>-->

        <h2>所有订单</h2>
        <ul>
            <li v-for="item in datalist" :key="item.id">
                {{item.title}}-
                <span v-if="item.state===0">已支付</span>
                <span v-else-if="item.state===1">待发货</span>
                <span v-else-if="item.state===2">已发货</span>
                <span v-else="item.state===3">已完成</span>
            </li>
        </ul>

        <!--template 就是一个包装元素，不会真正的创建在页面上，既可以实现包装其他元素，又不会破坏原生DOM结构-->
        <template v-if="isShow">
            <li>11111</li>
            <li>22222</li>
            <li>33333</li>
        </template>

    </div>
</body>
<script>
    let vm = Vue.createApp({
        data(){
            return{
                isShow: false,
                datalist: [
                    {
                        id:0,
                        title:'11111',
                        state:0
                    },
                    {
                        id:1,
                        title:'22222',
                        state:1
                    },
                    {
                        id:2,
                        title:'33333',
                        state:2
                    },
                    {
                        id:3,
                        title:'44444',
                        state:3
                    }
                ]
            }
        }
    }).mount("#box")
</script>
</html>